import { useState, useContext } from 'react';
import { PhoneOutlined } from '@ant-design/icons';
import Rtc from '../Rtc';

import { ContentType } from '../../../constants';
import { MySdkStoreContext } from '../../../context';

import './style.scss';
import AvatarImage from '../../../components/AvatarImage';

export default function(props) {
  const { cid, from, onClose } = props;
  const mySdkStore = useContext(MySdkStoreContext);
  const [rtcPageProps, setRtcPageProps] = useState({ visible: false });

  // 点击”拒绝“事件处理
  const handleReject = async () => {
    const msgBody = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'rejectInvite' }
    };
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    await mySdkStore.sdk.sendMessage(msgParams);
  }

  // 点击”接受“事件处理，进入音视频通话界面
  const handleAccept = async () => {
    const msgBody = {
      msgType: ContentType.Rtc,
      msgContent: { rtcAction: 'acceptInvite', rtcSlot: {
        publishVideoElementId: 'implusPublishVideoElementId',
        subscribeVideoElementId: 'implusSubscribeVideoElementId',
        subscribeAudioElementId: 'implusSubscribeAudioElementId'
      }, }
    };
    const msgParams = mySdkStore.sdk.messageBuilder(msgBody);
    await mySdkStore.sdk.sendMessage(msgParams);
    onClose();
    setRtcPageProps({
      visible: true,
      isVedioEnable: true,
      onClose: () => setRtcPageProps({ visible: false })
    });
  }

  return (<div className='rtcReceivePage'>
    <div className="avatarArea">
      <AvatarImage
        src={from.avatarUrl}
        style={{ margin: '16px auto', borderRadius: 8 }}
        fit='cover'
        width={100}
        height={100}
        nickName={from?.nickName}
        userName={from?.userName}
        userId={from?.userId}
      />
      {from.userName || from.userId}邀请你加入
      <div className="meetingName">{from.userName || from.userId}发起的视频会议</div>
    </div>
    <div className="iconButtonArea">
      <div>
        <div className="iconWrap reject" onClick={handleReject}>
          <PhoneOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        拒绝
      </div>
      <div>
        <div className="iconWrap" onClick={handleAccept}>
          <PhoneOutlined style={{ fontSize: 32, color: '#fff', lineHeight: '56px' }} />
        </div>
        接听
      </div>
    </div>
    { rtcPageProps.visible && <Rtc {...rtcPageProps} />}
  </div>
  )
}